<template>
  <div class="more-container">
    <el-form
      class="topstudentform"
      ref="topstudentform"
      :model="topstudentforms"
      size="small"
      label-width="92px"
      style="margin-top: 10px"
    >
      <el-row>
        <el-col :span="3">
          <el-form-item label-width="0" prop="teamId">
            <el-select
              clearable
              v-model="topstudentforms.teamId"
              placeholder="来源机构"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in chartData.allTeam"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" prop="branchId">
            <el-select
              clearable
              v-model="topstudentforms.branchId"
              placeholder="所属机构"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in chartData.ownTeam"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" prop="channel">
            <el-select
              clearable
              v-model="topstudentforms.channel"
              placeholder="招生渠道"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in channelOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" prop="carType">
            <el-select
              clearable
              v-model="topstudentforms.carType"
              placeholder="车型"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in gettypeOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4" class="fr">
          <div class="rightbtn">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="searchlist"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-left"
              size="small"
              @click="resetform"
            >
              重置
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <ve-pie
      :data="chartData.chartData"
      :height="'500px'"
      :extend="chartExtend"
      :title="title"
      :settings="chartSettings"
      style="margin-top: 60px"
    ></ve-pie>
  </div>
</template>
<script>
import { getSessionStorage } from '@/utils/accessToken'
import 'echarts/lib/component/title'
import { train } from '@/api/statistics'
export default {
  components: {},
  data() {
    this.chartExtend = {
      series: {
        radius: '150',
        center: ['40%', '50%'],
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        selected: {
          结业: false,
          退学: false,
          重新建档: false,
        },
        formatter: (name) => {
          let data = this.chartData.chartData.rows
          let total = 0
          for (let i = 0, l = data.length; i < l; i++) {
            if (data[i].title == name) {
              total = data[i].count
            }
          }
          return name + ' ' + total + ' 人'
        },
      },
    }
    this.chartSettings = {}
    return {
      topstudentforms: {},
      gettypeOptions: [],
      channelOptions: [],
      chartData: {},
      title: {
        text: '',
        x: '40%', //在图片中的x轴位置 left, right, middle
        y: '10', //在图片中的y轴位置 top, bottom
        textAlign: 'center', //整体（包括 text 和 subtext）的水平对齐 auto, left, right, center
      },
    }
  },

  methods: {
    async getchartData() {
      let params = {}

      if (this.topstudentforms.teamId && this.topstudentforms.teamId != '') {
        params.teamId = this.topstudentforms.teamId.join(',')
      }
      if (
        this.topstudentforms.branchId &&
        this.topstudentforms.branchId != ''
      ) {
        params.branchId = this.topstudentforms.branchId.join(',')
      }

      if (this.topstudentforms.carType && this.topstudentforms.carType != '') {
        params.carType = this.topstudentforms.carType.join(',')
      }
      if (this.topstudentforms.channel && this.topstudentforms.channel != '') {
        params.channel = this.topstudentforms.channel.join(',')
      }

      let data = await train(params)
      if (data.code == '0000') {
        this.chartData = data.data
        let total = 0
        this.chartData.chartData.rows.forEach((p) => {
          total += p.count
        })
        this.title.text = '学员总计：' + total + '人'
      }
    },
    searchlist() {
      this.getchartData()
    },
    resetform() {
      this.$refs['topstudentform'].resetFields()
      this.getchartData()
    },
  },
  created() {
    this.getchartData()
  },
  mounted() {
    this.gettypeOptions = getSessionStorage('Options')[1]
    this.channelOptions = getSessionStorage('Options')[14]
  },
}
</script>

<style scoped lang='scss'>
</style>